<template>
  <div class="template-section">
    <h4 class="section-name">在线模板</h4>
    <div class="template-list">
      <div
        class="template-item"
        v-for="(item, index) in templateList"
        :key="index"
      >
        {{ item.content }}
      </div>
    </div>
  </div>
</template>

<script>
import { BaseModules } from "@/components/DiyNew/diy/dataConfig/config.js";

export default {
  name: "",
  props: {},
  data() {
    return {
      templateList: [
        {
          content: "我是模板1",
        },
        {
          content: "我是模板2",
        },
        {
          content: "我是模板3",
        },
        {
          content: "我是模板4",
        },
      ],
    };
  },
  watch: {},
  computed: {},
  methods: {
    // 点击切换展开的组件模块
    changeModule(item) {
      console.log(item);
      this.activeModuleBtns = String(item.targetIndex);
    },
    // 点击模块
    handleModuleItem(collapse, item, i) {
      collapse.activeModule = i;
      console.log(item);
    },
  },
};
</script>

<style lang="scss" scoped>
.template-section {
  width: 100%;
  .section-name {
    width: 100%;
    height: 60px;
    background: #ffffff;
    padding: 24px 24px 14px 24px;
    font-size: 16px;
    color: #000000;
    margin: 0;
  }
  .template-list {
    width: 288px;
    display: flex;
    flex-wrap: wrap;
    margin: 0 auto;
    .template-item {
      width: 136px;
      height: 196px;
      background: #ffffff;
      border: 1px solid #e8eaec;
      border-radius: 4px;
      text-align: center;
      margin: 8px 4px;
      cursor: pointer;
    }
  }
}
</style>
